<template>
	<view class="cooperation">
		<uv-navbar :title="title" @leftClick="leftClick"
			bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)" :fixed="true"></uv-navbar>
		<view class="cooperation-search">
			<view class="cooperation-top">
				<uv-search placeholder="请输入搜索内容" v-model="keyword" @search="search" @custom="search"></uv-search>
			</view>
		</view>
		<view class="cart">
			<view class="cart-item" v-for="i in wuejList" :key="i.id" @click.stop="Godetail(i.id,i.user_id)">
				<view class="cart-top">
					<view>{{ i.type_text }}</view>
				</view>
				<view class="cart-bottom">
					<view class="cart-left">
						<image :src="BaseUrl + i.cover" style="width: 170rpx; height: 170rpx; border-radius: 30rpx"
							mode="scaleToFill" />
					</view>
					<view class="cart-right">
						<!-- <uv-parse class="cart-right-text line-clamp-2" :content="i.content"></uv-parse> -->
						<view class="cart-right-text line-clamp-2">
							{{i.title}}
						</view>
						<view class="cart-right-bon">
							<view class="cart-right-left" style="width: 180rpx; display: flex; line-height: 60rpx">
								<image :src="BaseUrl + '/static/catering/Eyeo.png'" style="width: 26rpx; height: 26rpx"
									mode="scaleToFill" />
								<text class="cart-right-left-text">{{ i.views }}</text>
							</view>
							<view class="cart-right-right" @click.stop="dian(i.id)">
								<view v-if="0 == i.isLike" class="cart-right-ss">
									<image :src="BaseUrl + '/static/catering/noollection.png'"
										style="width: 30rpx;height: 30rpx;" mode="scaleToFill" />
									<view class="cart-right-s-texts">收藏</view>
								</view>
								<view v-else class="cart-right-s">
									<image :src="BaseUrl + '/static/catering/shouc.png'"
										style="width: 30rpx;height: 30rpx;" mode="scaleToFill" />
									<view class="cart-right-s-text">已收藏</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		BaseUrl
	} from "../../../utils/req.js"
	import {
		getZhongList
	} from '@/utils/play.js'
	export default {
		data() {
			return {
				BaseUrl,
				keyword: '',
				id: '',
				wuejList: [],
				title: '',
			}
		},
		onLoad(options) {
			console.log('示范专区列表', options)
			// this.ingv()
			this.title = options.name
			this.id = options.id
			this.getList(this.id)
		},
		methods: {
			/* 查询该专区的列表 */
			async getList(id) {
				const res = await getZhongList({
					wanlshop_find_cate_id: this.id
				});
				this.wuejList = res.data.data
				console.log('示范专区', res)
			},
			// 跳转种草详情
			Godetail(id,user_id) {
				console.log('详情', id)
				uni.navigateTo({
					url: `/dabai/pages/zcDetails/zcDetails?id=${id}`
				})
			},
			// 收藏
			async dian(id) {
				await this.$request
					.post("api/wanlshop/find/user/setFindUser", {
						id: id,
						type: "likes",
					})
					.then((res) => {
						if (res.data.data == 1) {
							uni.showToast({
								title: "收藏成功",
								icon: "none",
								duration: 2000,
							});
							this.getList()
						} else {
							uni.showToast({
								title: "取消收藏",
								icon: "none",
								duration: 2000,
							});
							this.getList()
						}
					});
			},
			leftClick() {
				uni.navigateBack()
			},
			// 攻略列表
			async ingv() {
				await this.$request.get("api/wanlshop/find.find/cate", {

				}).then(res => {
					console.log(res.data, '分类');
					res.data.forEach(t => {
						if (this.id == t.pid) {
							this.list.push(t)
						}
					});
					this.text_id = this.list[0].id
					this.getList()
				})
			},
			// 搜索
			async search() {
				await this.$request.get("api/wanlshop/find/find/getList", {
					search: this.keyword,
					type: 'works',
					page: 1,
					wanlshop_find_cate_id: this.id
				}).then((res) => {
					console.log(res.data.data, '搜索1111111111111111111111111');
					this.wuejList = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uv-tabs__wrapper__nav__item {
		width: 50% !important;
	}

	/deep/.uv-search__content {
		background-color: #FFFFFF !important;
	}

	/deep/.uv-search__content__input {
		background-color: #FFFFFF !important;

	}

	/deep/.uv-search__action {
		background: linear-gradient(to right, #00a579, #057849);
		padding: 14rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 4rpx;
		color: #fff !important;
		width: 140rpx !important;
	}

	.cooperation {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #D3F1DE 0%, #F4F6F5 30%, #F6F6F6 100%);

		.cooperation-search {
			width: 94vw;
			margin: 0rpx 3vw;
			padding-top: 190rpx;

			.cooperation-top {
				background-color: #fff;
				border-radius: 30rpx;

			}
		}



		.tabs {
			margin: 0 20rpx;
		}

		.cart {
			width: 94vw;
			padding-top: 20rpx;
			margin: 0 3vw;

			.cart-item {
				width: 100%;
				height: 290rpx;
				background-color: #fff;
				border-radius: 30rpx;
				margin-bottom: 20rpx;

				.cart-top {
					width: 94vw;
					margin: 0 3vw;
					padding: 32rpx 34rpx 32rpx 0;
				}

				.cart-bottom {
					display: flex;


					.cart-left {
						margin: 0 20rpx;
					}

					.cart-right {
						flex: 1;

						.cart-right-text {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							line-height: 1;
							height: 90rpx;
						}

						.cart-right-bon {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 20rpx;

							.cart-right-left {


								.cart-right-left-text {
									margin-left: 10rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 26rpx;
									color: #666666;
								}
							}

							.cart-right-right {
								display: flex;
								align-items: center;

								.cart-right-s {
									display: flex;
									align-items: center;
									margin-right: 20rpx;
									border-radius: 30rpx;
									border: 1rpx solid #057849;
									padding: 6rpx 15rpx;

									.cart-right-s-text {
										margin-left: 10rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										font-size: 26rpx;
										color: #057748;

									}


								}

								.cart-right-ss {
									display: flex;
									align-items: center;
									margin-right: 20rpx;
									border-radius: 30rpx;
									border: 1rpx solid #666;
									padding: 6rpx 15rpx;

									.cart-right-s-texts {
										margin-left: 10rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										font-size: 26rpx;
										color: #666666;
									}
								}
							}
						}
					}
				}

			}
		}
	}
	.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>